<template>
  <div>
    <van-nav-bar title="积分兑换" left-text="返回" left-arrow @click-left="$router.back()" />

    <is-empty v-if="isEmpty">抱歉,没有任何积分商品</is-empty>
    <van-list v-model="loading" :finished="finished" :immediate-check="false" :finished-text="finished_text" @load="loadMore">
      <div class="lists">
        <div class="item" v-for="item in lists">
          <div class="wrap" @click="toGoodsView(item.id)">
            <div class="image"><img :src="item.image" alt="" /></div>
            <div class="title">{{item.title}}</div>
            <div class="points">积分{{item.pay_points}}</div>
            <div class="common"><div class="btn" @click.stop="pointsExchange(item.id)">去兑换</div></div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import loadMore from '@/components/mixin/load-more';
import IsEmpty from '@/components/include/empty';

export default {
  mixins: [loadMore],
  components: {
    [IsEmpty.name]: IsEmpty
  },

  data() {
    return {

      finished_text: '没有更多了',
      lists: []
    };
  },

  created() {
    //this.loadData();



    this.resetInit();
    this.loadMore();
  },
  methods: {


    toGoodsView(goods_id){


        this.$router.push({
          path: '/goodsViews',
          query: {
            goods_id: goods_id
          }
        });


    },

    pointsExchange(goods_id){

      this.$router.push({
        path: '/pointsExchange',
        query: {
          goods_id: goods_id
        }
      })

    },

    loadMore() {


      this.apiPost('/shop.goods/points_goods', {
        page_size: this.pages.pageSize,
        page: this.pages.currPage
      }).then(res => {

        if (res.data.length == 0 && this.pages.currPage == 1) {
          this.finished_text = '';
          this.finished = true;
          this.isEmpty = true;
          this.historyShow = false;
          return false;
        } else {
          this.finished_text = '没有更多了';
        }

        this.lists.push(...(res.data || []));

        if (res.data.length < this.pages.pageSize) {
          this.isFinished();
        } else {
          this.nextPage();
        }


      });


    }
  }
};
</script>

<style lang="scss" scoped="scoped">
  @import "@/assets/scss/variable.scss";
.lists {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: calc(calc(100% / 2) - 0px);
    box-sizing: border-box;
    padding: 5px;

    .wrap {
      background-color: white;
      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);

      .image{

        img{
          width: 100%;
        }

      }
      .title{
        font-size: 13px;
        color: #9f9f9f;
        text-align: center;
      }
      .points{
        font-size: 15px;
        text-align: center;
        color: $colorPrimary;
      }
      .common{
        padding: 5px;
        box-sizing: border-box;
        .btn{
          background-color: $colorPrimary;
          color: white;
        }
      }
    }
  }
}
</style>
